<template>
  Test
  <br />
  <button @click="isShow = !isShow">切换</button>
  <hr />
  <transition name="zjd">
    <div v-if="isShow">HelloWorld</div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
    }
  },
}
</script>

<style>
.zjd-enter-from,
.zjd-leave-to {
  opacity: 0;
}
.zjd-enter-to,
.zjd-enter-from {
  opacity: 1;
}
.zjd-enter-active,
.zjd-enter-active {
  transition: opacity 2s ease;
}
</style>
